// 进度 柱形图
(function () {
    const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8878F6", "#f0f"];
    let oEchart = echarts.init(document.getElementById('progressBarChart'));
    // 使用刚指定的配置项和数据显示图表。
    oEchart.setOption({
        grid: {
            left: "5%",
            top: "10%",
            bottom: "10%",
            containLabel: true
        },
        xAxis: {
            show: false
        },
        yAxis: [
            {
                type: "category",
                data: ["html5", "css3", "javascript", "vue", "node", "webpack"],
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: "#ffffff"
                },
                axisTick: {
                    show: false
                },
                inverse: true
            },
            {
                type: "category",
                data: [702, 350, 610, 793, 664, 890],
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: "#ffffff"
                },
                axisTick: {
                    show: false
                },
                inverse: true
            }
        ],
        series: [
            {
                name: "条",
                type: "bar",
                data: [70, 34, 60, 78, 69, 63],
                itemStyle: {
                    barBorderRadius: 20,
                    color: function (params) {
                        return myColor[params.dataIndex];
                    }
                },
                barCategoryGap: 50,
                barWidth: 10,
                label: {
                    show: true,
                    position: "inside",
                    formatter: "{c}%"
                },
                yAxisIndex: 0
            },
            {
                name: "框",
                type: "bar",
                barCategoryGap: 50,
                barWidth: 15,
                data: [100, 100, 100, 100, 100, 100],
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    barBorderRadius: 15
                },
                yAxisIndex: 1
            }
        ]
    });
})()